<template>
  <div class="home-box">
    <!-- 顶部 -->
    <el-row :gutter="20">
      <el-col :span="16" :xs="24">
        <el-card shadow="hover" class="top-box">
          <div class="top-box-content">
            <div class="content-list">
              <count-to class="list-p1" :decimals="2" :start-val="0" :end-val="monthPay / 100" :duration="2600" />
              <p class="list-p2">本月已收费用</p>
            </div>
          </div>
          <div class="top-box-content">
            <div class="content-list">
              <count-to class="list-p1" :start-val="0" :decimals="2" :end-val="monthNoPay / 100" :duration="2600" />
              <p class="list-p2">本月待收费用</p>
            </div>
          </div>
          <div class="top-box-content">
            <div class="content-list">
              <!-- <p class="list-p1">{{payArrearage/100}}</p> -->
              <count-to class="list-p1" :start-val="0" :decimals="2" :end-val="payArrearage / 100" :duration="2600" />
              <p class="list-p2">本月收回欠缴费用</p>
            </div>
          </div>
        </el-card>
        <!-- 概览 -->
        <el-card shadow="hover" class="top-left">
          <div slot="header" class="clearfix">
            <span>概览</span>
          </div>
          <div class="left-list">
            <div class="list-content">
              <div class="con-img">
                <img src="../assets/image/xq.png" alt="" srcset="" />
              </div>
              <div class="con-text">
                <p class="p3">小区</p>
                <p class="p2">
                  <count-to :start-val="0" :end-val="parseInt(countRegions)" :duration="2600" />
                  <span class="p3"> 个</span>
                </p>
              </div>
            </div>
            <div class="list-content">
              <div class="con-img">
                <img src="../assets/image/zh.png" alt="" srcset="" />
              </div>
              <div class="con-text">
                <p class="p3">住户</p>
                <p class="p2">
                  <count-to :start-val="0" :end-val="parseInt(countUsers)" :duration="2600" />
                  <span class="p3"> 个</span>
                </p>
              </div>
            </div>
            <div class="list-content">
              <div class="con-img">
                <img src="../assets/image/ld.png" alt="" srcset="" />
              </div>
              <div class="con-text">
                <p class="p3">楼栋</p>
                <p class="p2">
                  <count-to :start-val="0" :end-val="parseInt(countHouses)" :duration="2600" />
                  <span class="p3"> 个</span>
                </p>
              </div>
            </div>
            <div class="list-content">
              <div class="con-img">
                <img src="../assets/image/yj.png" alt="" srcset="" />
              </div>
              <div class="con-text">
                <p class="p3">每月应收费用</p>
                <p class="p2">
                  <count-to :start-val="0" :decimals="2" :end-val="totalMonthFee / 100" :duration="2600" />
                  <span class="p3"> 元</span>
                </p>
              </div>
            </div>
            <div class="list-content">
              <div class="con-img">
                <img src="../assets/image/hs.png" alt="" srcset="" />
              </div>
              <div class="con-text">
                <p class="p3">户数</p>
                <p class="p2">
                  <count-to :start-val="0" :end-val="parseInt(countRooms)" :duration="2600" />
                  <span class="p3"> 户</span>
                </p>
              </div>
            </div>
            <!-- <div class="list-content">
                <div class="con-img"><img src="../assets/image/xq.png" alt="" srcset=""></div>
                <div class="con-text">
                  <p class="p3">设备</p>
                  <p class="p2">
                    <count-to :start-val="0" :end-val="2563" :duration="2600"/>
                    <span class="p3"> 个</span>
                  </p>
                </div>
              </div> -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-card shadow="hover" class="top-right">
          <div slot="header" class="clearfix">
            <span>常用功能</span>
          </div>
          <div class="top-r-box">
            <router-link to="/operation/pay">
              <div class="box-list">
                <div class="box-list-img">
                  <img src="../assets/image/pay.png" alt="" srcset="" />
                </div>
                <p class="p1">缴费管理</p>
              </div>
            </router-link>
            <router-link to="/basicinfo/user">
              <div class="box-list">
                <div class="box-list-img">
                  <img src="../assets/image/icon2.png" alt="" srcset="" />
                </div>
                <p class="p1">住户管理</p>
              </div>
            </router-link>
            <router-link to="/basicinfo/audit">
              <div class="box-list">
                <div class="box-list-img">
                  <img src="../assets/image/icon3.png" alt="" srcset="" />
                </div>
                <p class="p1">登记审核</p>
              </div>
            </router-link>
          </div>
        </el-card>
        <el-card shadow="hover" class="top-right top-right2">
          <div slot="header" class="clearfix">
            <span>待办事项</span>
          </div>
          <div class="top-r-box">
            <el-badge :value="countNoPays" v-if="countNoPays > 0" :max="999" class="item">
              <router-link to="/operation/pay">
                <div class="box-list">
                  <div class="box-list-img">
                    <img src="../assets/image/icon4.png" alt="" srcset="" />
                  </div>
                  <p class="p1">费用欠缴</p>
                  <P class="p2">查看更多</P>
                </div>
              </router-link>
            </el-badge>
            <router-link to="/operation/pay" v-else>
              <div class="box-list">
                <div class="box-list-img">
                  <img src="../assets/image/icon4.png" alt="" srcset="" />
                </div>
                <p class="p1">费用欠缴</p>
                <P class="p2">查看更多</P>
              </div>
            </router-link>
            <el-badge :value="countFeedBacks" v-if="countFeedBacks > 0" :max="999" class="item">
              <router-link to="/operation/feedback">
                <div class="box-list">
                  <div class="box-list-img">
                    <img src="../assets/image/icon5.png" alt="" srcset="" />
                  </div>
                  <p class="p1">意见反馈</p>
                  <P class="p2">查看更多</P>
                </div>
              </router-link>
            </el-badge>
            <router-link to="/operation/feedback" v-else>
              <div class="box-list">
                <div class="box-list-img">
                  <img src="../assets/image/icon5.png" alt="" srcset="" />
                </div>
                <p class="p1">意见反馈</p>
                <P class="p2">查看更多</P>
              </div>
            </router-link>
            <el-badge :value="countRepairs" v-if="countRepairs > 0" :max="999" class="item">
              <router-link to="/operation/repairs">
                <div class="box-list">
                  <div class="box-list-img">
                    <img src="../assets/image/icon6.png" alt="" srcset="" />
                  </div>
                  <p class="p1">故障报修</p>
                  <P class="p2">查看更多</P>
                </div>
              </router-link>
            </el-badge>
            <router-link to="/operation/repairs" v-else>
              <div class="box-list">
                <div class="box-list-img">
                  <img src="../assets/image/icon6.png" alt="" srcset="" />
                </div>
                <p class="p1">故障报修</p>
                <P class="p2">查看更多</P>
              </div>
            </router-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="index-box2">
      <el-col :span="16" :xs="24">
        <el-card shadow="hover">
          <div class="grid-content bg-purple" :style="{ width: '100%' }">
            <div id="myChart" :style="{ width: '100%', height: '300px' }"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-card shadow="hover" class="index-box-list">
          <div slot="header" class="clearfix">
            <span>通知公告</span>
          </div>
          <ul v-if="activities != ''" class="box-list-notice">
            <router-link to="/operation/notice">
              <li v-for="(activity, index) in activities" :key="index">
                <span class="li-text1">{{ activity.title }}</span><span class="li-text2">{{ activity.createTime }}</span>
              </li>
            </router-link>
          </ul>
          <div v-else class="no-notice">
            <img src="../assets/image/no_notice.png" alt="" />
            <div class="text">暂无通知公告</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 缴费比例 -->
    <el-row :gutter="20" class="index-box2">
      <el-col :span="16" :xs="24" class="box2-left">
        <div class="grid-content bg-purple">
          <el-card class="box-card ratio-map" shadow="hover">
            <div class="circle-box">
              <!-- #303133 -->
              <el-progress type="circle" color="#44D7B6" :stroke-width="10"
                :percentage="monthPayPercentage"></el-progress>
              <p>本月缴费金额比例</p>
            </div>
            <div class="circle-box">
              <el-progress type="circle" color="#0091FF" :stroke-width="10"
                :percentage="monthPayRoomsPercentage"></el-progress>
              <p>本月缴费户数比例</p>
            </div>
            <div class="circle-box">
              <el-progress type="circle" color="#FA6400" :stroke-width="10"
                :percentage="backArrearagePercentage"></el-progress>
              <p>本月收回欠缴金额比例</p>
            </div>
            <div class="circle-box">
              <el-progress type="circle" color="#6DD400" :stroke-width="10"
                :percentage="backArrearageRoomsPercentage"></el-progress>
              <p>本月收回欠缴户数比例</p>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8" :xs="24">
        <div class="grid-content bg-purple">
          <el-card shadow="hover" class="index-box-list" style="height: 160px">
            <div slot="header" class="clearfix">
              <span>异常设备</span>
            </div>
            <el-carousel v-if="tableData != ''" :interval="4000" type="card">
              <el-carousel-item v-for="(item, index) in tableData" :key="index">
                <div class="el-tag-box">
                  <el-tag size="mini" type="success">小区</el-tag>
                  <span class="text"> {{ item.regionName }}</span>
                </div>
                <div class="el-tag-box">
                  <el-tag size="mini" type="info">序列号</el-tag>
                  <span class="text"> {{ item.deviceIemi }}</span>
                </div>
                <div class="el-tag-box">
                  <el-tag size="mini" type="warning">安装位置</el-tag>
                  <span class="text"> {{ item.regionName }}</span>
                </div>
                <div class="el-tag-box">
                  <el-tag size="mini" type="danger">状态</el-tag>
                  <span class="text">
                    {{ item.status == 0 ? '异常' : '正常' }}</span>
                </div>
                <div class="el-tag-box">
                  <el-tag size="mini">类型</el-tag>
                  <span class="text">
                    {{ item.deviceType == 0 ? '2G门禁' : '2G门禁' }}</span>
                </div>
              </el-carousel-item>
            </el-carousel>
            <div v-else class="no-abnormal">
              <img src="../assets/image/translate.png" alt="" />
              <div class="text">暂无异常设备</div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <div class="copyright">© 版权归 {{ copyright }} 所有</div>
  </div>
</template>

<script>
import { EchartList, listNotice, overviewList, toDoList } from '@/api/index'
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  data() {
    return {
      //分页参数
      queryParams: {
        current: 1,
        size: 10
      },
      activities: null,
      totalMonthFee: '0', //每月应收总额
      countHouses: '0', //楼栋数量
      countRegions: '0', //小区数量
      countRooms: '0', //户数
      countUsers: '0', //住户数
      monthPay: '0', //当月已收
      monthNoPay: '0', //本月待收
      countFeedBacks: '0', //总意见数
      countNoPays: '0', //总未缴数
      countRepairs: '0', //总报修数
      monthPayPercentage: 0, //本月缴费金额比例
      monthPayRoomsPercentage: 0, //本月缴费户数比例
      backArrearagePercentage: 0, //本月收回欠缴金额比例
      backArrearageRoomsPercentage: 0, //本月收回欠缴户数比例
      payArrearage: 0, //本月收回欠缴费用
      tweenedNumber: 0,
      copyright: '',
      tableData: [
        // {installation:'海德公馆',status:'0',regionName:'海德公馆',deviceIemi:'ab5sggd5gd5',deviceType:'02'},
        // {installation:'云顶之欲',status:'0',regionName:'云顶之欲',deviceIemi:'ab5sggd5gd5',deviceType:'02'},
        // {installation:'中山颐景',status:'0',regionName:'中山颐景',deviceIemi:'ab5sggd5gd5',deviceType:'02'},
        // {installation:'海岸大厦',status:'0',regionName:'海岸大厦',deviceIemi:'ab5sggd5gd5',deviceType:'02'},
        // {installation:'华强北',status:'0',regionName:'华强北',deviceIemi:'ab5sggd5gd5',deviceType:'02'}
      ]
    }
  },
  mounted() {
    this.drawLine()
    this.copyright = sessionStorage.getItem('companyName')
  },
  created() {
    this.getNotice()
    this.getOverview()
    this.getToDoList()
  },
  methods: {
    drawLine() {
      // let regionId = sessionStorage.getItem("communityId");
      //折线图
      EchartList().then((response) => {
        var xAxis = response.data.xAxis
        var pay = response.data.pay
        var noPay = response.data.noPay
        //初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        // var colors = ["#5793f3", "#d14a61", "#675bba"];
        var colors = ['#5793f3', '#5AD8A6', '#5AD8A6']
        //全局设置Echrts - 根据窗口的大小变动图表
        window.onresize = function () {
          myChart.resize()
        }
        var option = {
          color: colors,
          title: {
            text: '缴费详细'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['已缴费用', '欠缴费用']
          },
          grid: {
            left: '2%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            right: '2%',
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '已缴费用',
              type: 'line',
              data: pay,
              smooth: true
            },
            {
              name: '欠缴费用',
              type: 'line',
              data: noPay,
              smooth: true
            }
          ]
        }
        myChart.setOption(option)
      })
    },
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    //公告列表
    getNotice() {
      listNotice(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          if (response.code == 0) {
            this.activities = response.data
          }
        }
      )
    },
    //概览
    getOverview() {
      overviewList().then((response) => {
        this.totalMonthFee = response.data.totalMonthFee
        this.countRegions = response.data.countRegions
        this.countHouses = response.data.countHouses
        this.countRooms = response.data.countRooms
        this.countUsers = response.data.countUsers
        this.monthPay = response.data.monthPay
        this.monthNoPay = response.data.monthNoPay
        this.monthPayPercentage = parseFloat(response.data.monthPayPercentage)
        this.monthPayRoomsPercentage = parseFloat(
          response.data.monthPayRoomsPercentage
        )
        this.backArrearagePercentage = parseFloat(
          response.data.backArrearagePercentage
        )
        this.backArrearageRoomsPercentage = parseFloat(
          response.data.backArrearageRoomsPercentage
        )
        this.payArrearage = response.data.payArrearage
      })
    },
    //待办事项
    getToDoList() {
      toDoList().then((response) => {
        this.countFeedBacks = response.data.countFeedBacks
        this.countNoPays = response.data.countNoPays
        this.countRepairs = response.data.countRepairs
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$color: #b5b5b5;
$bgc: rgb(240, 242, 245);
$fz: 14px;

.home-content-box {
  width: 100%;
  background-color: $bgc;
  // background-color: #19203A;
}

.home-box {
  width: 97%;
  margin: 0 auto;
  padding: 20px 0;

  .grid-right {
    width: 100%;
    display: flex;
    flex-direction: column;

    .right-text {
      width: 100%;
      text-align: left;
      margin-bottom: 20px;

      strong {
        font-size: 24px;
      }

      .strong-1 {
        font-size: 30px;
      }

      p {
        background-color: #fff;
        font-size: $fz;
      }
    }
  }

  .circle-box {
    width: 25%;
    height: 121px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    p {
      font-size: $fz;
      margin: 0;
    }
  }

  .grid-content-2 {
    height: 420px;

    .el-card {
      height: 100%;
    }
  }

  .box-card {
    .box-img {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .box-img img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin: 10px auto;
    }

    .box-img span {
      display: inline-block;
      width: 100%;
      background-color: #333;
      color: #fff;
      margin-bottom: 25px;
      font-size: $fz;
      text-align: center;
    }
  }

  .ratio-map {
    display: flex;

    /deep/ .el-card__body {
      display: flex;
      width: 100%;
      justify-content: space-between;
    }
  }

  .center-cards {
    margin: 20px auto;
  }

  .clearfix {
    display: flex;
    align-items: center;

    span {
      font-size: 16px;
      margin-left: 10px;
      color: #000;
      font-weight: 600;
    }
  }

  .overview {
    width: 90%;
    display: flex;
    margin: auto;
    justify-content: space-between;
  }

  .overview .line {
    width: 1px;
    border-right: 1px solid $color;
  }

  .overview-2-line {
    border-bottom: 1px solid $color;
  }

  .overview-2 {
    width: 90%;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: space-between;

    p {
      text-align: left;
    }

    .p1 {
      font-size: 30px;
      margin: 20px 0 10px 0;
    }

    .p2 {
      margin: 0 0 30px 0;
      color: $color;
      font-size: $fz;
    }

    .cards-2 a {
      font-size: $fz;
      color: $color;
    }
  }

  .cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    margin: 20px auto;

    p {
      margin: 0;
    }
  }

  .cards .p1 {
    font-size: 30px;
    color: #333;
    margin-bottom: 10px;
  }

  .cards .p2 {
    color: $color;
    margin-bottom: 10px;
    font-size: $fz;
  }

  .overview-center {
    width: 95%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid $color;
    border-bottom: 1px solid $color;
  }

  .center-text {
    text-align: center;
    margin: 25px auto;

    p {
      margin: 0;
      padding: 0;
    }

    .p1 {
      font-size: 30px;
      color: #333;
      margin-bottom: 10px;
    }

    .p2 {
      color: $color;
      font-size: $fz;
    }
  }

  .step-box {
    width: 90%;
    margin: 20px 0 0 0;
  }
}

.el-carousel__item {
  background-color: #fff;
  border: 1px solid #f5f5f5;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-tag-box {
  margin: 1.5px;

  .text {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
  }

  .el-tag {
    width: 60px;
    // text-align:
  }
}

//首页
</style>
